<!--
 * @Author: Dorange.Wang
 * @Date: 2021-11-12 14:04:31
 * @LastEditors: your name
 * @LastEditTime: 2021-11-16 14:38:11
 * @Description: file content
-->
<template>
  <div class="websql-result">
    <el-tabs v-if="results.length > 0" v-model="activeTab">
      <el-tab-pane
        class="result-item-pane"
        lazy
        v-for="(result, index) in results"
        :key="index"
        :label="$t('sys.result') + `${index + 1}`"
        :name="'result' + `${index + 1}`"
      >
        <div v-if="resultsType[index] === 'string'">{{ result }}</div>
        <template v-else-if="resultsType[index] === 'object'">
          <div v-if="result.length > 0">
            <el-table
              :data="result"
              style="width: 100%"
              stripe
              border
              size="mini"
              :height="tableHeight"
            >
              <!-- <el-table-column prop="version" label="#" width="48" fixed="left">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column> -->
              <el-table-column
                v-for="(value, code) in result[0]"
                :key="code"
                :prop="code"
                :label="code"
                show-overflow-tooltip
              >
                <template slot="header">
                  <el-tooltip :content="code" placement="top-start">
                    <span>{{ code }}</span>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  {{ valueParse(scope.row[code]) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>{{ $t("sys.no_results_found") }}</div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {} from "element-ui";
import { Debounce } from "@/utils/decorator.js";
import moment from "moment";
export default {
  name: "Result",
  components: {},
  data() {
    return {
      results: [],
      resultsInfo: [],
      activeTab: "",
      tableHeight: 144,
    };
  },

  mounted() {},

  methods: {
    @Debounce(100)
    initTableHeight() {
      const height = document
        .querySelector(".websql__content--result")
        .getBoundingClientRect().height;
      this.tableHeight = height - 44;
    },
    setResult(results) {
      this.results = results;
      this.resultsType = results.map((result) => typeof result);
      this.activeTab = "result1";
    },

    valueParse(value) {
      if (typeof value === "boolean") {
        return String(value);
      } else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
        return moment(value).format("YYYY-MM-DD HH:mm:ss.SSS");
      } else {
        return value;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.websql-result ::v-deep .el-table .cell {
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}
.websql-result ::v-deep .el-tabs__header {
  margin-bottom: 4px;
  margin-top: 0px;
}
// .websql-result,
// .websql-result .el-tabs{
//   height: 100%;
//   overflow:hidden;
// }

// .websql-result ::v-deep  .el-tabs .el-tabs__content{
//   height: calc(100% - 56px);
//   overflow: auto;
// }

// .websql-result .el-table{
//    width: fit-content !important;
// }

// .websql-result ::v-deep  .el-tabs .el-table__header-wrapper,
// .websql-result ::v-deep  .el-tabs .el-table__body-wrapper{
//   width: fit-content;
// }
</style>
